<template>
  <div class="page-container">
    <el-card shadow="never" class="search-form-card">
      <el-form class="search-form" inline label-width="75px" label-suffix=":">
        <el-row :gutter="50">
          <el-col :span="8">
            <el-form-item label="订阅状态">
              <el-select v-model="searchParams.status" placeholder="请选择">
                <el-option
                  v-for="item in statusList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订阅时间">
              <el-date-picker
                v-model="searchParams.timeValue"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="服务名称">
              <el-input v-model="searchParams.name" placeholder="请输入关键字" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="提供单位">
              <ElSelectTree
                v-model="searchParams.deptId"
                :data="deptList"
                node-key="id"
                :props="{
                  label: 'deptName',
                  children: 'children'
                }"
                check-strictly
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" @click="onSearch">查询</el-button>
              <el-button @click="onReset">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <el-tabs v-model="searchParams.type" @tab-click="onSearch">
        <el-tab-pane label="数据目录" name="database" />
        <el-tab-pane label="数据接口" name="api" />
      </el-tabs>

      <div class="table-box">
        <el-table
          v-loading="loading"
          stripe
          :data="tableData"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255, 255, 255, 0.8)"
          @selection-change="onSelect"
        >
          <el-table-column
            v-for="item in columns"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            align="center"
          />
          <el-table-column label="操作" fixed="right" width="260px">
            <template slot-scope="scope">
              <el-button
                type="text"
                @click="dialogDetail(scope.row)"
              >详情</el-button>
              <template v-if="scope.row.status === 'online'">
                <el-button
                  type="text"
                  color="#0DB493"
                  @click="dialogView(scope.row)"
                >查看应用成效</el-button>
                <el-button
                  type="text"
                  color="#0DB493"
                  @click="dialogEvaluate(scope.row)"
                >评价</el-button>
                <el-button
                  type="text"
                  color="#0DB493"
                  @click="dialogOut(scope.row)"
                >退订</el-button>
              </template>
              <template v-if="scope.row.status === 'offline'">
                <el-button
                  type="text"
                  color="#0DB493"
                  @click="dialogView(scope.row)"
                >查看应用成效</el-button>
                <el-button
                  type="text"
                  color="#0DB493"
                  @click="dialogEvaluate(scope.row)"
                >评价</el-button>
              </template>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-box">
        <el-pagination
          background
          :current-page="pageNo"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalSize"
          @size-change="changePageSize"
          @current-change="changePageNo"
        />
      </div>
    </el-card>
    <ServeSubAppEvaluateForm ref="ServeSubAppEvaluateForm" title="评价" />
    <el-drawer
      size="700px"
      class="custom-drawer"
      :visible.sync="drawer"
      :direction="direction"
      :with-header="false"
    >
      <div class="title"><h3>应用成效</h3></div>
      <div class="body">
        <el-form
          ref="formRef"
          :disabled="!!effectDetail"
          :model="ruleForm"
          :rules="rules"
          label-position="top"
          label-suffix=" :"
        >
          <el-form-item label="应用成效" prop="content">
            <el-input v-model="ruleForm.content" type="textarea" :rows="5" />
          </el-form-item>
        </el-form>
        <div class="f-r a-c j-e" style="margin: 10px 0;">
          <el-button v-if="!effectDetail" type="primary" @click="handleSubmit">保存</el-button>
          <el-button @click="handleClose">取消</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import crud from '@/mixins/crud'
import ServeSubAppEvaluateForm from './evaluateItem'
import { mapGetters } from 'vuex'
import { http_dept, http_serve_sub_server } from '@/api'
export default {
  components: {
    ServeSubAppEvaluateForm
  },
  mixins: [crud],
  computed: {
    ...mapGetters(['enum']),
    statusList() {
      return this.enum['SubDataStatusType'] || []
    }
  },
  data() {
    return {
      request: http_serve_sub_server,
      searchParams: {
        timeValue: [],
        status: '',
        name: '',
        deptId: '',
        type: 'database'
      },
      deptList: [],
      columns: [
        { prop: 'businessName', label: '服务名称', width: '', minWidth: '' },
        { prop: 'createTime', label: '订阅时间', width: '', minWidth: '' },
        { prop: 'statusName', label: '订单状态', width: '', minWidth: '' },
        { prop: 'createDeptName', label: '提供单位', width: '', minWidth: '' },
        { prop: 'onlineTime', label: '服务开通时间', width: '', minWidth: '' }
      ],
      tableData: [],
      drawer: false,
      direction: 'rtl',
      rules: {
        content: [{ required: true, message: '输入不能为空', trigger: 'blur' }]
      },
      // 应用成效详情
      effectDetail: null
    }
  },
  created() {
    http_dept.tree().then(res => {
      this.deptList = res
    })
  },
  methods: {
    formatTableData(data) {
      data.forEach(v => {
        v.statusName = this.statusList.find(e => e.value === v.status).name
      })
    },
    // 详情
    dialogDetail(item) {
      this.$router.push({
        path: '/serve-publish/server-detail/sub/' + item.id + '/' + (item.auditRequestId || '')
      })
    },
    // 应用成效
    dialogView(item) {
      this.ruleForm = {
        subId: item.id,
        content: ''
      }
      this.drawer = true
      http_serve_sub_server.effectDetail({ subId: item.id }).then(res => {
        this.effectDetail = res
        if (res) {
          this.ruleForm = {
            content: this.effectDetail.content
          }
        }
      })
    },
    handleSubmit() {
      http_serve_sub_server.effectCreate({ subId: this.ruleForm.subId }, {
        content: this.ruleForm.content
      }).then(() => {
        this.drawer = false
        this.initData()
      })
    },
    handleClose() {
      this.drawer = false
    },
    // 评价
    dialogEvaluate(rowItem) {
      this.$refs.ServeSubAppEvaluateForm.open(rowItem)
    },
    // 退订
    dialogOut(rowItem) {
      this.$confirm('确认退订？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.request.unsub({
            subId: rowItem.id
          }, {}).then(() => {
            this.onSearch()
          })
        })
    }

  }
}
</script>

<style lang="scss" scoped>
.page-container {
  height: 100%;
}
</style>
